	<template>
		<view :class="[primarySize()]">
			<view class="page-foot bg-white">
				<view class="ptb10 plr30" @click="bindSubmit()">
					<view class="btn1">保存信息</view>
				</view>
			</view>
			<view class="container">
				<view class="ptb20 plr30">
					<view class="box">
						<view class="tip_tit">选择标签</view>
						<view class="clearfix tip_info">
							<view @click="bindToggleTag(item)" v-for="item in tags" class="tip_item"
								:class="[inArray(item, selectedTags)?'active':'']">{{item}}</view>
						</view>
						<view class="clearfix tip_info" style="border-top: 1rpx solid #F3F3F3;">
							<view @click="bindToggleTag(item)" v-for="item in selectedTags" v-if="!inArray(item, tags)"
								class="tip_item" :class="[inArray(item, selectedTags)?'active':'']">{{item}}</view>
						</view>
						<textarea @input="bindTagInput" placeholder="可自定义标签 ，号间隔" placeholder-class="colb"
							class="fs24 col3 text_main"></textarea>

					</view>
				</view>
			</view>
		</view>
	</template>

	<script>
		const app = getApp();
		export default {
			data() {
				return {
					
					selectedTags: [],
					tags: []
				}
			},
			onReady() {
				if (app.globalData.primary != 'blue') {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#ff7100'
					})
				} else {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#2A79F2'
					})
				}
			},
			onLoad() {
				
				this.getOpenerEventChannel().on('dataTransfer', data => {
					let selectedTags = [];
					data.model.forEach(item => selectedTags.push(item.name));
					this.selectedTags = selectedTags;
					this.$util.getResumePersonalTags(true).then(items => {
						let tags = [];
						items.forEach(item => tags.push(item.name));
						this.tags = tags;
					});
				});
			},
			methods: {
				bindToggleTag(tag) {
					let index = this.selectedTags.indexOf(tag);
					if (index === -1) {
						this.selectedTags.push(tag);
					} else {
						this.selectedTags.splice(index, 1);
					}
					this.$forceUpdate()
				},

				bindTagInput(event) {
					let tag = event.detail.value.replace(/^[\s,，]*/, '');
					if (tag !== '' && /[\s,，]$/.test(tag)) {
						tag = tag.replace(/[\s,，]*$/, '');
						if (tag.length > 8) {
							uni.showToast({
								title: '标签最长8个字符',
								icon: 'none'
							});
							return tag.substr(0, 8);
						}
						if (this.selectedTags.indexOf(tag) !== -1) {
							// 标签已在选中列表中， 清空输入啥也不干
							return "";
						}
						this.selectedTags.push(tag);
						return "";
					}
				},

				bindSubmit() {
					this.$core.post({
						url: 'xilujob.user/save_module',
						data: {
							tags: this.selectedTags,
							module: 'personal_tag'
						},
						success: ret => {
							this.getOpenerEventChannel().emit('dataTransfer', {
								model: ret.data.model,
								complete_percent: ret.data.complete_percent
							});
							uni.navigateBack();
						},
					})
				},
			}
		}
	</script>

	<style lang="scss" scoped>
		.box {
			margin: 0 0 40rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 18rpx;
		}

		.tip_tit {
			line-height: 102rpx;
			border-bottom: 1rpx solid #F3F3F3;
			font-size: 30rpx;
			color: #333
		}

		.tip_item {
			float: left;
			padding: 0 19rpx;
			line-height: 56rpx;
			margin-right: 24rpx;
			border-radius: 8rpx;
			margin-bottom: 19rpx;
			background-color: #F7F7F7;
			font-size: 24rpx;
			color: #999999
		}

		.tip_item image {
			display: inline-block;
			vertical-align: middle
		}

		.tip_info {
			padding-top: 37rpx;
			padding-bottom: 18rpx;

		}

		.ml0 {
			margin-left: 0
		}

		.text_main {
			width: 100%;
		}

		.tip_item.active {
			color: #898989;
			background-color: #FFE3CC
		}
	</style>